<!DOCTYPE html>
<!-- saved from url=(0052)https://getbootstrap.com/docs/4.0/examples/checkout/ -->
<html lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/images/i-nice-logo.svg">

    <title>Show Results</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/checkout/">

    <!-- Bootstrap core CSS -->
    <link href="../static/running_config/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../static/running_config/form-validation.css" rel="stylesheet">
   <link href="../static/css/main.css" rel="stylesheet">
     <script src="../static/js/5ec65ef964.js"></script>
    <script src="./static/running_config/echarts.min.js"></script>
    <script src="../static/running_config/jquery-3.5.1.js"></script>
  </head>


  <body class="bg-light">
     <div class="all-content">
        <!-- sidebar links left -->
        <div class="sidebar">
            <h2><img src="../static/images/i-nice-logo.svg" height="100px"></h2>
            <ul>
                <li><a href=""><i class="fas fa-home"></i>Home</a></li>
                <li><a href="{{ url_for('ac.running_config') }}"><i class="fas fa-flask"></i>Configurations</a></li>
                <li><a id="sidebardataset"><i class="fas fa-chart-bar"></i>Dataset Details</a></li>
                <li><a id="sidebarresult"><i class="fas fa-tree"></i>Results</a></li>
                <li><a href="{{ url_for('ac.show_config') }}"><i class="fas fa-flask"></i>Simple Configurations</a></li>
                <li style="background: #C88D33"><a><i class="fas fa-flask"></i>Simple Results </a></li>
            </ul>

            <!-- sidebar links footer tag starts here -->
            <div class="footer_tag">
                <a href="">Copyright Inice visualization 2020</a>

                <!-- sidebar links footer tag ends here -->
            </div>


            <!-- sidebar links left tag ends here -->
        </div>
        <div class="main-content">
            <!-- top welcome message -->
            <div class="header">
                <h1 align="center">
                    Welcome to Inice Visualization Platform
                </h1>

                <p align="right" style="margin-right: 30px;">
                    <a href="logout">logout</a>
                </p>

            </div>

<!--            <div class="infoUp">-->
<!--                <h4>Configuration Name: <input type="text" name="" id="configNameInput" > </h4>-->
<!--            </div>-->

            <div class="info">


                <div style="background: white;">
{#                <div class="info4" style="background: white;">#}

                      <div class="col-md-12 mb-3" style="text-align: center; float: left;">

                          {% for runResult in runResults %}

                          <table border="0" style=" text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 600px;
                         padding:10px;

                         top: 0px;
                         left: 20px; display: inline-table; margin: 30px">

                  <tr>
                    <td style="width:600px;height:400px;" colspan="6">
                        <div id='r{{ runResult['code'] }}' style="width: 550px;height:400px;"></div>
                    </td>
                        <script type="text/javascript">
                        var myChart = echarts.init(document.querySelector('#r{{ runResult['code'] }}'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                        var trueCenters = {{ runResult['trueCenters'] }};
                        var ob = {{ runResult['ob'] }};
                        var dataset = {{ runResult['dataset'] }};
                        var estCenters = {{ runResult['estCenters'] }};
                        var dsname = "{{ runResult['name'] }}";
                        var splitdata = {{ runResult['splitdata'] }};
                        option = {
                            title: {
                                text: dsname,
                                subtext: ''
                            },
                            grid: {
                                left: '3%',
                                right: '7%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                // trigger: 'axis',
                                confine: true ,
                                showDelay: 0,
                                formatter: function (params) {
                                    return params.seriesName + ' | id: ' + (params.dataIndex+1) + ' | record: '+ params.value;
                                },
                                axisPointer: {
                                    show: true,
                                    type: 'cross',
                                    lineStyle: {
                                        type: 'dashed',
                                        width: 1
                                    }
                                }
                            },
                            toolbox: {
                                feature: {
                                    dataZoom: {
                                    },
                                    restore: {}
                                }
                            },
                            xAxis: [
                                {
                                    show: true,
                                    type: 'value',
                                    scale: true,
                                    axisLabel: {
                                        formatter: '{value}'
                                    },
                                    splitLine: {
                                        show: false
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    show: true,
                                    type: 'value',
                                    scale: true,
                                    axisLabel: {
                                        formatter: '{value} '
                                    },
                                    splitLine: {
                                        show: false
                                    }
                                }
                            ],
                            series: [
{#                            {% for i in range(ecnum) %}#}
{#                                {#}
{#                                    name: 'cluster_' + {{ i }} + '_point',#}
{#                                    type: 'scatter',#}
{#                                    data: splitdata[{{ i }}],#}
{#                                },#}
{#                            {% endfor %}#}
                            {
                                name: 'dataset',
                                type: 'scatter',
                                color: '#b6f142',
                                data: dataset
                            },
                            {
                                name: 'estimated centres',
                                type: 'scatter',
                                color: '#f1265d',
                                data: estCenters
                            },
                            {
                                name: 'true centres',
                                type: 'scatter',
                                symbol: 'pin' ,
                                color: '#2c58f1',
                                symbolSize: 20,
                                data: trueCenters
                            },
                            {
                                name: 'observers',
                                type: 'scatter',
                                symbol: 'diamond' ,
                                symbolSize: 25,
                                data: ob
                            }
                            ]
                        };
                        myChart.setOption(option);
                        </script>
                  </tr>
                  <tr>
                    <td>True Center Num</td>
                    <td>{{ runResult['trueClustersNum'] }}</td>
                      <td> Estimate Center Num</td>
                       <td colspan="1">{{ runResult['estClustersNum'] }}</td>

                  </tr>
                  <tr>
                      <td>ARI</td>
                      <td>{{ runResult['ARI'] }}</td>
                      <td>NMI</td>
                      <td>{{ runResult['NMI'] }}</td>
                      <td>Purity</td>
                      <td>{{ runResult['purity'] }}</td>
                  </tr>
                  <tr>
                      <td colspan="6"><a target="_blank" href="./run_results?id={{ runResult['id'] }}" >Detail</a></td>
                  </tr>
                </table>
                          {% endfor %}

              </div>



                </div>
            </div>
        </div>
     </div>




   <script src="../static/running_config/popper.min.js.download"></script>
    <script src="../static/running_config/bootstrap.min.js.download"></script>
    <script src="../static/running_config/holder.min.js.download"></script>
    <script>
      $("#sidebardataset").click(function (){
                  var old_sidedir = document.getElementById("sidebardataset");
                  if(old_sidedir.href==""){
                      alert("Please select the dataset first!")
                  }
              });
      $("#sidebarresult").click(function () {
          var old_sideresult = document.getElementById("sidebarresult");
          if(old_sideresult.href==""){
              alert("Please select from your page!")
          }
      });
    </script>
  </body>
 </html>

